<template>
  <el-container class="main_con" style="padding-bottom: 0px">
    <div class="setting">
      <div class="setting_body">
        <div class="conetnt edit_con">
          <div class="edit_content">
            <el-form size="small" label-width="100px" ref="itemForm" :model="obj">
              <el-form-item label="Api Key">
                <el-input style="width:300px;" type="text" :rows="3" placeholder="请输入内容" v-model="obj.apikey"></el-input>

                <div style="color:#909399;font-size:12px;">
                  请先购买接口，购买地址：
                  <a target="_blank" style="color:#2E68EA" href="http://www.99api.com/Login?log=5&referee=9148">http://www.99api.com/Login?log=5&referee=9148</a>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div class="setting_bootom"><el-button v-has size="medium" type="primary" @click="saveData">提交</el-button></div>
    </div>
  </el-container>
</template>

<script>
import {scrapySave, getscrapy} from '@/api/mall/scrapy';

export default {
  data() {
    return {
      obj: {
        apikey: ''
      }
    };
  },
  mounted() {
    this.getdetail();
  },
  methods: {
    saveData() {
      let data = {
        configuration: this.obj
      };
      scrapySave(data).then(res => {
        this.getdetail();
        // this.$message.success('采集成功');
      });
    },
    getdetail() {
      getscrapy({}).then(res => {

        if (res.msg.configuration) {
          this.obj.apikey = res.msg.configuration.apikey;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
//覆盖样式
.main_con .edit_con .edit_content {
  border-bottom: 0;
}

.setting {
  background: #fff;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 110px);

  .setting_body {
    flex-grow: 1;
    overflow-y: auto;
    //padding-top: 20px;

    .setting_body_item {
      .header {
        background: #e0e3e8;
        height: 40px;
        line-height: 40px;
        padding-left: 20px;
        margin-top: 20px;
      }
    }
  }

  .setting_bootom {
    height: 60px;
    line-height: 60px;
    border-top: 1px solid #dcdfe6;
  }
}
</style>
